<template>
  <a-modal
    :class="modalToggleFlag ? 'ant-modal-broken0' : 'ant-modal-full'"
    :centered="true"
    :width="800"
    :visible="visible"
    @ok="handleChoose"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 56px);padding-top: 2px;padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" style="height:18px;width:18px;padding: 0;border-width: 2px">&nbsp;&nbsp;</a-button>
        </span>
      </div>
    </template>
    <div style="height: 450px">
      <div style="border-bottom:1px solid #d2d2d2;margin-top: 10px">
        <a-form layout="inline" style="display:flex;justify-content: flex-start;flex-wrap: wrap;margin-top: -15px" v-show="searchCondition && searchCondition.length > 0">
          <a-col md="8" v-for="(condition,index) in searchCondition"
                 :key="ChooseModal">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :placeholder="condition.label" style='width: 100%' v-model="searchParams[condition.field]" @pressEnter="searchByQuery"></a-input>
            </a-form-item>
          </a-col>
          <a-col md="8">
            <div style="display: flex;align-items: center" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" style="margin-left: 8px" @click="searchByQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </div>
          </a-col>
        </a-form>
        <a-form layout="inline">
          <slot v-bind:searchParams="searchParams"></slot>
        </a-form>
      </div>

      <div>
        <choose-table
          ref="chooseTable"
          :source="url"
          :table-fields="columns"
          :width="tableWidth"
          :height="tHeight"
          :mode="selectMode"
          :rows="records"
          :childrenColumnName="childrenColumnName"
          @beforeLoaded="handleBeforeLoaded"
          @dbclick="handleDoubleClick"
        >
        </choose-table>
      </div>
    </div>
  </a-modal>
</template>

<script>
import ChooseTable from '../cn-components/ChooseTable'
export default {
  name: "ChooseModal",
  components: { ChooseTable },
  comments: {
    ChooseTable,
  },
  props: {
    childrenColumnName: {
      type: String,
      default: function() {
        return 'children'
      },
    },
    chooseUrl: {
      type: String,
      default: function() {
        return ''
      }
    },
    tableFields: {
      type: Array,
      default: function() {
        return []
      }
    },
    mode: {
      type: String,
      default: function() {
        return 'radio'
      }
    },
    searchCondition: {
      type: Array,
      default: function() {
        return []
      }
    },
    rows: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableWidth: {
      type: Number,
      default: function() {
        return null
      },
    },
    tableHeight: {
      type: Number,
      default: function() {
        return 280
      },
    },
  },
  watch: {
    chooseUrl: function(newVal) {
      this.url = newVal
    },
    tableFields: function(newVal) {
      this.columns = newVal
    },
    mode: function(newVal) {
      this.selectMode = newVal
    },
    rows: function(newVal) {
      this.records = newVal?newVal:[]
    },

    modalWidth: function(newVal) {
      this.modalWidth = newVal?newVal:800
    },
    modalToggleFlag: function(newVal) {
      this.tHeight = newVal?this.tableHeight:530
    },
    tableHeight: function(newVal) {
      this.tHeight = newVal?newVal:280
    }
  },
  data () {
    return {
      scroll:{},
      records: this.rows?this.rows:[],
      modalWidth: 800,
      customerWidth: 800,
      tHeight: 280,
      modalToggleFlag: true,
      title: "选择",
      visible: false,
      selectMode: this.mode,
      url: this.chooseUrl,
      columns: this.tableFields,
      labelCol: {
        xs: { span: 0 },
        sm: { span: 0 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      searchParams: {}
    }
  },
  created () {
  },
  methods: {
    toggleScreen(){
      // if (this.modalToggleFlag) {
      //   this.modalWidth = window.innerWidth
      // } else {
      //   this.modalWidth = this.customerWidth
      // }
      this.modalToggleFlag = !this.modalToggleFlag
    },
    show(title = "") {
      this.modalWidth = this.customerWidth
      this.title = this.title + title
      this.visible = true
      if(this.$refs.chooseTable) {
        this.$refs.chooseTable.loadData()
      }
    },
    close () {
      this.title = "选择"
      this.searchParams = {}
      this.$refs.chooseTable.clearData()
      this.$emit('close')
      this.visible = false
    },
    handleChoose() {
      const choose = this.$refs.chooseTable.selectedRows
      this.$emit('choose', choose)
      this.close()
    },
    handleCancel () {
      this.close()
    },
    searchReset() {
      this.$refs.chooseTable.searchReset()
    },
    searchByQuery() {
      this.$refs.chooseTable.searchByQuery(this.searchParams)
    },
    handleBeforeLoaded(rows) {
      this.$emit('beforeTableLoaded', rows)
    },
    handleDoubleClick(record) {
      const choose = [ record ]
      this.$emit('choose', choose)
      this.close()
    }
  }
}
</script>
<style scoped>
  /deep/.ant-modal-header{
    height: 20%;
  }
  /deep/ .ant-modal-body {
    height: 86.5%;
  }
</style>